<template>
	<view class="guessing-competition" :style="{background:activityDataStatus?'#151C38':''}">
	   <block  v-if="activityDataStatus">
			<view class="gc_banner">
				<image class="imgBox" :src="activityData.img" mode="widthFix"></image>
			</view>
			<view class="gc_nav">
				<image class="gc_nav_line" src="/static/index/activity/ac_line.png" mode=""></image>
				<text class="gc_nav_word">CoCo余额</text>
				<image class="gc_nav_line" src="/static/index/activity/ac_line.png" mode=""></image>
			</view>
			<view class="gc_coco" v-if="loginStatus">{{activityData.usable}}</view>
			<view  class="gc_coco_login" @click="loginFunc" v-else >
				<text>未登录</text>
				<image src="/static/index/activity/ac_r1.png" mode=""></image>
			</view>
			<view class="gc_activity_list">
				<view class="list_item" v-for="el in activityList" :key="el.id" @click="jump(el)">
					<image :src="el.img" mode=""></image>
					<text>{{el.title}}</text>
				</view>
			</view>
			<!-- 日期列表 -->
			<scroll-view class="gc_date" scroll-x="true" :scroll-left='scrollLeft'>
				<view class="gc_date_item" :class="{'on':voindex == gcIndex}" v-for="(vo,voindex) in timeList" :key="voindex" @click="changeIndex(vo,voindex)">
					<view class="date_word">{{vo.chineseTime}}</view>
					<view class="date_line"></view>
				</view>
			</scroll-view>
			
			<view class="competition_list">
				<block v-for="(item,index) in dataList" :key="index">
				<view class="cl_item_first" v-if="item.status == 1">
					<view class="cl_item_title">
						<view class="title_box">
							<view class="title_A ellipseHide">{{item.groups}}</view>
							<view class="title_time">{{item.time}}开始</view>
						</view>
						<view class="jackpot">累积奖池：{{item.totalAmount}} CoCo</view>
					</view>
					<view class="cl_item_img">
						<view class="img_icon">
						   <image class="img" :src="item.oneIcon?item.oneIcon:'/static/index/logoIcom.png'" mode="aspectFill"></image>
						</view>
						<view class="img_vs_box">
							 <image class="img_vs" src="/static/index/activity/ac_vs.png" mode=""></image>
							 <!-- <view class="img_vs_fen">1 ：1</view> -->
						</view>
						<view class="img_icon">
						  <image class="img" :src="item.twoIcon?item.twoIcon:'/static/index/logoIcom.png'" mode="aspectFill"></image>
						</view>
					</view>
					<view class="cl_word">{{item.totalCount}}人参与竞猜</view>
					<view class="cl_item_line">
						<view class="item_line" :style="{width:item.oneRatio +'%'}"></view>
						<view class="item_line" :style="{width:item.dogfallRatio +'%'}"></view>
						<view class="item_line" :style="{width:item.twoRatio +'%'}"></view>
					</view>
					<view class="cl_item_name">
					   <view class="item_name01" @click="selectBetting(item,1)">
						   <view class="item_name_but ellipseHide">{{item.oneName}}</view>
						   <view class="item_name_fen">{{item.oneOdds}}</view>
					   </view>
					   <view class="item_name02" @click="selectBetting(item,3)">
						<view class="item_name_but">平局</view>
						<view class="item_name_fen">{{item.dogfallOdds}}</view>
					   </view>
					   <view class="item_name03" @click="selectBetting(item,2)">
						   <view class="item_name_but ellipseHide">{{item.twoName}}</view>
						   <view class="item_name_fen">{{item.twoOdds}}</view>
					   </view>
					</view>
				</view>
				
				<view class="cl_item" v-else>
					<view class="cl_item_title">
						<view class="title_box">
							<view class="title_A ellipseHide">{{item.groups}}</view>
							<view class="title_time" v-if="item.status == 2">待揭晓</view>
							<view class="title_time" v-else-if="item.status == 3">已结束</view>
							<view class="title_time" v-else="item.status == 4">奖励已发放</view>
							<!-- <view class="title_time">待揭晓</view> -->
						</view>
						<view class="jackpot">累积奖池：{{item.totalAmount}} CoCo</view>
					</view>
					<view class="cl_item_img">
						<view class="img_icon">
						   <image class="img" :src="item.oneIcon?item.oneIcon:'/static/index/logoIcom.png'" mode="aspectFill"></image>
						   <view class="img_name">{{item.oneName}}</view>
						   <image class="img_result" src="/static/index/activity/ac_p.png" mode="" v-if="item.eventsResult == 3"></image>
						   <image class="img_result" src="/static/index/activity/ac_s.png" mode="" v-if="item.eventsResult == 1"></image>
						</view>
						 <view class="img_vs_box">
							 <image class="img_vs" src="/static/index/activity/ac_vs.png" mode=""></image>
							 <view class="img_vs_fen" v-if="item.status == 2">? ：?</view>
							 <view class="img_vs_fen" v-else>{{item.oneScore}} ：{{item.twoScore}}</view>
						 </view>
						<view class="img_icon">
							<image class="img" :src="item.twoIcon?item.twoIcon:'/static/index/logoIcom.png'" mode="aspectFill"></image>
							<view class="img_name">{{item.twoName}}</view>
							<image class="img_result" src="/static/index/activity/ac_p.png" mode="" v-if="item.eventsResult == 3"></image>
							<image class="img_result" src="/static/index/activity/ac_s.png" mode="" v-if="item.eventsResult == 2"></image>
						</view>
					</view>
					<view class="cl_word">{{item.totalCount}}人参与竞猜</view>
					<view class="cl_item_line">
						<view class="item_line" :style="{width:item.oneRatio +'%'}"></view>
						<view class="item_line" :style="{width:item.dogfallRatio +'%'}"></view>
						<view class="item_line" :style="{width:item.twoRatio +'%'}"></view>
					</view>
				</view>
			 </block>
			</view>
			<view class="cl_footer">
				<view  @click="jumpPage(1)"   class="footer_item" :class="{'footer_item_n':commodityValue == 1}">精选活动</view>
				<view  @click="jumpPage(2)" v-if="commodityValue == 2"   class="footer_item" >神椰集市</view>
			</view>
			<DetailDialog ref="popupBox"  v-if="popupBoxStatus" @determine="determine" @close='close' :payNumber="activityData.minBetAmount" ></DetailDialog>
		</block>
		<block  v-if="activityDataStatus == false">
			<view class="no_info">
				<image src="/static/my/news_no.png" mode="widthFix"></image>
				<text>活动已下架</text>
			</view>
		</block>
	</view>
</template>

<script>
	import DetailDialog from './components/DetailDialog.vue'
	import { rsaEncrypt } from '@/common/RSA.js'
	import {getOperationConfiguration,getActivityInfo,getCustomerAmount,getEventsTimeList,getEventsList,getActivitySupportPay} from '@/api/api-v1-2.js'
	export default {
		components: {
		   DetailDialog,
		},
		data() {
			return {
				loginStatus:true,
				popupBoxStatus:false,
				gcIndex:0,
				timeList: [], //日期列表
				dataList:[], // 数据列表
				activityList: [{
						id: 1,
						title: '竞猜达人',
						url: '/pages/index/guessing-competition/guess-ranking/guess-ranking',
						img: '/static/index/activity/ac_icon01.png'
					},
					{
						id: 2,
						title: '支持记录',
						url: '/pages/index/guessing-competition/supporting-records/supporting-records',
						img: '/static/index/activity/ac_icon02.png'
					},
					{
						id: 3,
						title: '活动规则',
						url: '/pages/index/activity-rules/activity-rules',
						img: '/static/index/activity/ac_icon03.png'
					},
				],
				commodityValue:2,
				id:'',
				activityData:{},
				activityDataStatus:null ,//活动是否停用
				scrollLeft:0,
				activityId:'',
			}
		},
		onLoad(e) {

			if(e.name != undefined){
				uni.setNavigationBarTitle({
					title: e.name
				})
			}
			this.id = e.id
			this.getDonationShow()
			this.getEventsTimeList()
			
			// 判定是否是安卓登录
			if(e.app != undefined && e.time != undefined){
				 this.getAppAndroid()
				 this.$queue.setData('app','android')
			}else{
				if (this.$queue.getData('token') == undefined) {
					this.loginStatus = false
				}else{
					this.loginStatus = true
				}
				this.getActivityInfo()
			}
		},
		onShow() {
			this.close()
		},
		methods: {
			// 登录
			loginFunc(){
				// 判定是否是安卓
				if(this.$queue.getData('app') != undefined){
					 window.Android.onLogin()
				}else{
					var url = '/pages/index/guessing-competition/guessing-competition?id='+this.id
					uni.redirectTo({
						url:"/pages/login/login?linkJump="+url
					})
				}

			},
             // 获取安卓信息
			getAppAndroid(){
				var token = window.Android.onGetToken();
				if(token != ''){
					this.$queue.setData('token',token)
					// this.$queue.setData('app','android')
					this.loginStatus = true
				}else{
					this.loginStatus = false
					uni.removeStorageSync('token')
				}
				this.getActivityInfo()
				
			},

			// 页面转跳
			jumpPage(index){
				if(this.$queue.getData('app') != '' && this.$queue.getData('app') != undefined){
					if(index == 1){
						window.Android.onSelectionActivity();
					}else if(index == 2){
						window.Android.onBazaarListActivity();
					}
				}else{
					if(index == 1){
						uni.navigateTo({
							url:'/pages/index/selected-activities/selected-activities'
						})
					}else if(index == 2){
						uni.navigateTo({
							url:'/pages/my/shenye-market/shenye-market'
						})
					}
				}

			},
			// 获取竞猜活动信息（H5）
			async getActivityInfo(){
				var res = await getActivityInfo(this.id)
				if(res.result == ''){
					this.activityDataStatus = false
				}else{
					this.activityDataStatus = true
					this.activityData = res.result
					uni.setNavigationBarTitle({
						title:this.activityData.name
					})
				}
				
			},
			// 神椰集市是否显示 1不显示 2显示
			async getDonationShow() {
				var res = await getOperationConfiguration()
				var el = res.result
				this.commodityValue = el.commodityValue
			},
			async getDonationShow() {
				var res = await getOperationConfiguration()
				var el = res.result
				this.commodityValue = el.commodityValue
			},
			// 查询支持竞猜活动比赛时间列表
			async getEventsTimeList(){
				var data ={
					guessActivityId:this.id
				}
				var res = await getEventsTimeList(data)
				this.timeList = res.result
				if(this.timeList != ''){
					this.timeList.some((item,index)=>{
							if (this.paytimeQuantum(item.time)) {
								this.gcIndex = index
								if(this.gcIndex >=2){
									this.scrollLeft = (this.gcIndex - 1) * 90
								}
								return true
							}
						});
					this.getEventsList()
				}
			},
			// 判定当前时间是否大于 给定时间 小于 fasle 大于true
			paytimeQuantum(paytime) {
				if (paytime != null) {
					paytime = this.timeConversion(1,paytime);//获取传入时间 并将其转化为date型
					var nowTime = this.timeConversion(2); //获取当前时间
					if (paytime >= nowTime) {
						return true
					}
					return false
				} else {
					return false
				}
			},
			// 时间
			timeConversion(type,dateData = '') {
				var date = ''
				if(type == 1){
					date = new Date(dateData.replace(/-/g, '/'))
				}else{
					date = new Date()
				}
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? ('0' + m) : m
				var d = date.getDate()
				d = d < 10 ? ('0' + d) : d
				var time = y + '-' + m + '-' + d;
				// this.ruleForm.duedate=time;
				return time
			},
			// 查询支持竞猜活动比赛列表
			async getEventsList(){
				var data ={
					guessActivityId:this.id,
					time:this.timeList[this.gcIndex].time
				}
				var res = await getEventsList(data)
				this.dataList = res.result
			},
			// 转跳
			jump(e){
				if(e.id == 3){
					uni.navigateTo({
						url:e.url+'?imgUrl='+this.activityData.ruleImg
					})
				}
				else{
					if(this.loginStatus){
						uni.navigateTo({
							url:e.url+'?id='+this.activityData.id
						})
					}else{
						this.$queue.showToast('请登录后查看！')
					}

				}
	
			},
			// 切换时间
			changeIndex(vo,index){
				this.gcIndex = index
				this.dataList = []
				this.getEventsList()
			},
			// 投注
			selectBetting(item,index){
				// index 1 投一队 2投二队 3投平局
				if(this.loginStatus){
					this.votingTeam = index
					this.activityId = item.id
					this.popupBoxStatus = true // 开启弹窗
				}else{
					this.$queue.showToast('请登录后投注！')
				}

			},
			// 关闭窗口
			close(){
				this.popupBoxStatus = false
			},
			// 输入正确 密码调用
			async determine(e){
				var data = {
					betAmount:e.betAmount,
					id:this.activityId,
					tradePassword:e.password,
					betObject:this.votingTeam
				}
				let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
				let params = {
					encryptData: jiami
				}
				uni.showLoading({
					title:'加载中。。。',
					mask:true
				})
				try{
					var res = await getActivitySupportPay(params)
					uni.hideLoading()
					this.close()
					this.$queue.showToast('投注成功！');
					this.dataList = []
					this.getEventsList()
					this.getActivityInfo()
					
				}catch{
					this.$refs.popupBox.password = ''
					uni.hideLoading()
				}
				
			},

		}
	}
</script>

<style scoped>
	page {
		/* background: #151C38; */
		height: 100%;
	}
	.guessing-competition{
		min-height: 100%;
		/* background: ; */
	}
	.gc_banner {
		width: 750rpx;
		/* height: 750rpx; */
		margin-bottom: 68rpx;
	}
	.guessing-competition{
		padding-bottom: 150rpx;
	}
	.gc_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;

	}

	.gc_nav_word {
		padding: 0 32rpx;
		font-size: 34rpx;
		color: #fff;
	}

	.gc_nav_line {
		width: 218rpx;
		height: 26rpx;
	}

	.gc_nav_line:last-child {
		transform: rotate(180deg);
	}

	.gc_coco {
		width: 100%;
		text-align: center;
		font-size: 61rpx;
		color: #FFCC90;

	}
	.gc_coco_login{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #FFCC90;
	}
	.gc_coco_login text{
		border-bottom: 2rpx solid #FFCC90;
	}
	.gc_coco_login image{
		width: 16rpx;
		height: 30rpx;
		margin-left: 8rpx;
	}
	/* 竞猜活动 */
	.gc_activity_list {
		width: 100%;
		padding: 0 58rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 50rpx 0;
	}

	.list_item {
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.list_item image {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 16rpx;
	}

	/* end */

	/* 日期列表 */
	.gc_date {
		width: 750rpx;
		height: 94rpx;
		background: url('/static/index/activity/ac_date.png') no-repeat;
		background-size: 100% 100%;
		white-space: nowrap;
		margin-bottom: 70rpx;
	}
	/deep/ .gc_date ::-webkit-scrollbar{
		display: none;
	}
	.gc_date .gc_date_item:first-child{
		margin-left: 30rpx;
	}
	.gc_date .gc_date_item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 160rpx;
		height: 100%;
		font-size: 34rpx;
		color: #6176C9;
		margin-right: 60rpx;
	}
	 .gc_date .on{
		 color: #FFFFFF;
	 }
	 .on .date_line{
		position: absolute;
		bottom: 2rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	/* end */
	/* 比赛列表 */
	.cl_item_first{
		width: 690rpx;
		padding-bottom: 30rpx;
		/* height: 552rpx; */
		/* border: 3rpx solid #DFF4A2; */
		border-radius: 12rpx;
		background: url('/static/index/activity/ac_bg.jpg') no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}
	.cl_item_title{
		width: 100%;
		padding: 22rpx;
		box-sizing: border-box;
		background: rgb(6,46,14,.5);
		border-radius: 12rpx 12rpx 0px 0px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.title_box{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.title_A{
		max-width: 160rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		height: 44rpx;
		background: #EE1A14;
		border: 2rpx solid #FF9696;
		border-radius: 8rpx;
		line-height: 44rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fff;
	}
	.title_time{
		font-size: 32rpx;
		color: #FFFFFF;
		margin-left: 18rpx;
	}
	.jackpot{
		font-size: 26rpx;
		color: #fff;
	}
	.cl_item_img{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 30rpx;
	}
	 .img{
		width: 140rpx;
		height: 140rpx;
		border: 3rpx solid #DFF4A2;
		border-radius: 50%;
		overflow: hidden;
	}
	.img_icon .img_name{
		font-size: 30rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 10rpx;
	}
	.img_icon{
		position: relative;
	}
	.img_icon .img_result{
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: -24rpx;
		right: -50rpx;
	}
	.img_vs_box{
		margin: 0 64rpx;
	}
	.cl_item_img .img_vs{
		width: 136rpx;
		height: 136rpx;
		
	}
	.cl_word{
		width: 100%;
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		margin-top: 4rpx;
		margin-bottom:18rpx;
	}
	.cl_item_line{
		width: 600rpx;
		height: 18rpx;
		border-radius: 200rpx;
		margin: 0 auto;
		overflow: hidden;
		display: flex;
		flex-direction: row;
	}
	.item_line:nth-child(1){
		width: 40%;
		height: 100%;
		background: #3B1CFB;
	}
	.item_line:nth-child(2){
		width: 20%;
		height: 100%;
		background: #fff;
	}
	.item_line:nth-child(3){
		width: 40%;
		height: 100%;
		background: #EE1A14;;
	}
	.cl_item_name{
		width: 100%;
		box-sizing: border-box;
		padding: 0 38rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.item_name_but{
		padding: 0 4rpx;
		box-sizing: border-box;
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 12rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.item_name_fen{
		width: 104rpx;
		height: 42rpx;
		background: rgba(0, 0, 0, .2);
		border-radius: 200rpx;
		font-size: 28rpx;
		line-height: 42rpx;
		text-align: center;
		color: #fff;
		margin-top: 24rpx;
	}
	.item_name01,.item_name02,.item_name03{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.item_name01 .item_name_but{
		background: #334FEE;
		border: 2rpx solid #1938EA;
		
	}
	.item_name02 .item_name_but{
		width: 122rpx;
		background: #FFFFFF;
		border: 2px solid #2C6825;
		color: #2C6825;
	}
	.item_name03 .item_name_but{
		background: #FF4A31;
		border: 2px solid #D02F1A;
	}
	
	/* 平常 */
	.cl_item{
		width:690rpx;
		/* height: 448rpx; */
		background: #16265E;
		border: 3rpx solid #345DB0;
		border-radius: 12px;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding-bottom: 40rpx;
	}
	.cl_item .cl_item_title{
		background: #3560B6;
	}
	.img_vs_fen{
		/* width: 112rpx; */
		padding: 0 10rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background: #1E448E;
		border-radius: 4rpx;
	}
	.cl_item .cl_word{
		margin-top: 16rpx;
	}

	.cl_footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		display: flex;
		flex-direction: row;
	}
	.cl_footer .footer_item{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
	}
	.cl_footer .footer_item_n{
		width: 100%;
	}
	.cl_footer .footer_item:nth-child(1){
		color: #ffffff;
		background: #0E49BF;
	}
	.cl_footer .footer_item:nth-child(2){
		background: #132155;
		color: #4F66BE;
	}
	/* end */
</style>
